<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!DOCTYPE html>
<!-- saved from url=(0064)https://www.xiabingbao.com/demo/css3-infinite-scroll/simple.html -->
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>CSS3无限滚动</title>
    <style type="text/css">
        @-webkit-keyframes rowup {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(0, -307px, 0);
                transform: translate3d(0, -307px, 0);
            }
        }
        @keyframes rowup {
            0% {
                -webkit-transform: translate3d(0, 0, 0);
                transform: translate3d(0, 0, 0);
            }
            100% {
                -webkit-transform: translate3d(0, -307px, 0);
                transform: translate3d(0, -307px, 0);
            }
        }

        .demo-list{
            width: 300px;
            border: 1px solid #999;
            margin: 20px auto;
            position: relative;
            height: 200px;
            overflow: hidden;
        }

        .demo-list .rowup{
            -webkit-animation: 10s rowup linear infinite normal;
            animation: 10s rowup linear infinite normal;
            position: relative;
        }
    </style>
    <script src="js/jquery-3.5.1.min.js"></script>
</head>
<body>
<h1>用CSS3实现无限循环的无缝滚动</h1>
<p>返回文章： <a href="http://www.xiabingbao.com/css3/2017/07/03/css3-infinite-scroll.html">用CSS3实现无限循环的无缝滚动</a></p>
<style type="text/css">
    .renav{
        width:200px;
        height:150px;
        line-height:21px;
        overflow:hidden;
        background:#FFFFFF;
    }
    .renav li{
        height:21px;
    }
</style>
<div class="renav">

    <ul style="margin-top: 0px;">
        <li>


        </li>
        <li><a>瑞声达</a></li>
        <li><a>未添加1</a></li>
        <li><a>未添加2</a></li>
        <li><a>未添加3</a></li>
        <li><a>未添加4</a></li>
        <li><a>西门子</a></li>
        <li><a>欧姆龙</a></li>
    </ul>
</div>
<script>
    $(function(){
        var $this = $(".renav");
        var scrollTimer;
        $this.hover(function(){
            clearInterval(scrollTimer);
        },function(){
            scrollTimer = setInterval(function(){
                scrollNews( $this );
            }, 2000 );
        }).trigger("mouseout");
    });
    function scrollNews(obj){
        var $self = obj.find("ul:first");
        var lineHeight = $self.find("li:first").height();
        $self.animate({ "margin-top" : -lineHeight +"px" },600 , function(){
            $self.css({"margin-top":"0px"}).find("li:first").appendTo($self);
        })
    }
</script>
</body></html>
</body>
</html>